.model-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: fit-content;
  min-width: 100%;
  max-height: 240px; /* Add max height */
  overflow-y: auto; /* Enable vertical scrolling */
  background: rgb(2, 8, 9); /* Updated to match TaskTable background */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  z-index: 10;
  animation: dropdownFadeIn 0.2s ease;

  /* Firefox scrollbar styling */
  scrollbar-width: thin; /* Updated to match TaskTable */
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Updated colors */
}

/* WebKit scrollbar styling */
.model-dropdown::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.model-dropdown::-webkit-scrollbar-track {
  background: transparent; /* Updated to match TaskTable */
}

.model-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2); /* Updated color */
  border-radius: 4px; /* Updated radius */
  border: none; /* Removed border */
  background-clip: unset; /* Removed padding-box */
}

.model-dropdown::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3); /* Updated hover color */
  border: none; /* Removed border */
  background-clip: unset; /* Removed padding-box */
}

.model-option {
  padding: 12px;
  color: rgba(255, 255, 255, 0.8);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgb(2, 8, 9); /* Added to match TaskTable background */
}

.model-option:hover {
  background: rgba(255, 255, 255, 0.05);
}

.model-option.selected {
  background: rgba(
    64,
    169,
    255,
    0.1
  ); /* Updated to use the blue accent color */
  color: rgba(255, 255, 255, 0.95); /* Updated selected text color */
}

.model-selector-button > span {
  color: rgba(255, 255, 255, 0.95) !important;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
